<div class="row">
  <div class="col-md-6 col-xs-12">
    <sa-card title="基本设置" baCardClass="with-scroll">
      <div class="col-sm-12 col-xs-12">
        <form
          class="form-horizontal option-form"
          [formGroup]="optionForm" 
          (ngSubmit)="submitOptionForm(optionForm.value)"
        >
          <div class="form-group row" [ngClass]="controlStateClass(title)">
            <label for="blog-title" class="col-sm-2 form-control-label">站点标题</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="blog-title" 
                placeholder="站点标题"
                [formControl]="title"
              />
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(sub_title)">
            <label for="blog-sub-title" class="col-sm-2 form-control-label">副标题</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="blog-sub-title" 
                placeholder="副标题"
                [formControl]="sub_title"
              />
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(keywords)">
            <label for="blog-keywords" class="col-sm-2 form-control-label">关键词</label>
            <div class="col-sm-10">
              <textarea
                type="text" 
                class="form-control blog-array-textarea" 
                id="blog-keywords" 
                placeholder="关键词，每行为一个"
                [formControl]="keywords"
                (change)="handleKeywordsChange($event)"
              ></textarea>
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(description)">
            <label for="blog-description" class="col-sm-2 form-control-label">描述</label>
            <div class="col-sm-10">
              <textarea
                type="text" 
                class="form-control blog-array-textarea" 
                id="blog-description" 
                placeholder="描述"
                [formControl]="description"
              ></textarea>
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(site_url)">
            <label for="blog-site-url" class="col-sm-2 form-control-label">站点地址</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="blog-site-url" 
                placeholder="站点地址（URL）"
                [formControl]="site_url"
              />
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(site_email)">
            <label for="blog-site-email" class="col-sm-2 form-control-label">电子邮件地址</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="blog-site-email" 
                placeholder="博客邮件地址"
                [formControl]="site_email"
              />
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(site_icp)">
            <label for="blog-icp-id" class="col-sm-2 form-control-label">ICP备案号</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="blog-icp-id" 
                placeholder="如：陕ICP备0000000号"
                [formControl]="site_icp"
              />
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(blacklist_ips)">
            <label for="blog-blacklist-ips" class="col-sm-2 form-control-label">黑名单 - IP</label>
            <div class="col-sm-10">
              <textarea
                id="blog-blacklist-ips"
                class="form-control blog-array-textarea"
                placeholder="这些IP来源的评论将被拒绝，用换行分隔多个IP地址。"
                [formControl]="blacklist_ips"
                (change)="handleCommentBlacklistIpsChange($event)"
              ></textarea>
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(blacklist_mails)">
            <label for="blog-blacklist-mails" class="col-sm-2 form-control-label">黑名单 - 邮箱</label>
            <div class="col-sm-10">
              <textarea
                id="blog-blacklist-mails"
                class="form-control blog-array-textarea"
                placeholder="这些邮箱来源的评论将被拒绝，用换行分隔多个邮箱地址。"
                [formControl]="blacklist_mails"
                (change)="handleCommentBlacklistMailsChange($event)"
              ></textarea>
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(blacklist_keywords)">
            <label for="blog-blacklist-keywords" class="col-sm-2 form-control-label">黑名单 - 关键字</label>
            <div class="col-sm-10">
              <textarea
                id="blog-blacklist-keywords"
                class="form-control blog-array-textarea"
                placeholder="包含这些关键字的的评论将被拒绝，用换行分隔多个关键词。"
                [formControl]="blacklist_keywords"
                (change)="handleCommentBlacklistKeywordsChange($event)"
              ></textarea>
            </div>
          </div>
          <hr>
          <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
              <button
                type="submit" 
                class="btn btn-default btn-with-icon"
                [disabled]="!optionForm.valid || fetching[Loading.Option]"
              >
                <i class="ion-md-done-all"></i>
                <span>保存修改</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </sa-card>
  </div>
  <div class="col-md-6 col-xs-12">
    <sa-card title="个人设置" baCardClass="with-scroll">
      <div class="col-sm-12 col-xs-12">
        <form
          class="form-horizontal auth-form"
          [formGroup]="authForm" 
          (ngSubmit)="submitAuthForm(authForm.value)"
        >
          <div class="form-group row" [ngClass]="controlStateClass(gravatar)">
            <label class="col-sm-2 form-control-label">个人头像</label>
            <div class="col-sm-10">
              <sa-picture-uploader
                class="form-control auth-gravatar"
                [formControl]="gravatar"
              ></sa-picture-uploader>
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(name)">
            <label for="option-user-name" class="col-sm-2 form-control-label">姓名</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="option-user-name"
                placeholder="个人名字"
                [formControl]="name"
              >
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(slogan)">
            <label for="option-user-slogan" class="col-sm-2 form-control-label">个人签名</label>
            <div class="col-sm-10">
              <input
                type="text" 
                class="form-control" 
                id="option-user-slogan" 
                placeholder="个人签名"
                [formControl]="slogan"
              >
            </div>
          </div>
          <hr>
          <div class="form-group row" [ngClass]="controlStateClass(password)">
            <label for="option-user-password" class="col-sm-2 form-control-label">旧密码</label>
            <div class="col-sm-6">
              <input
                type="password" 
                class="form-control" 
                id="option-user-password" 
                placeholder="输入旧密码"
                autocomplete="password"
                [formControl]="password"
              >
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(new_password)">
            <label for="option-user-new-password" class="col-sm-2 form-control-label">新密码</label>
            <div class="col-sm-6">
              <input
                type="password" 
                class="form-control" 
                id="option-user-new-password" 
                placeholder="输入新密码"
                autocomplete="new_password"
                [formControl]="new_password"
              >
            </div>
          </div>
          <div class="form-group row" [ngClass]="controlStateClass(rel_new_password)">
            <label for="option-user-rel-new-password" class="col-sm-2 form-control-label">确认新密码</label>
            <div class="col-sm-6">
              <input
                type="password" 
                class="form-control" 
                id="option-user-rel-new-password" 
                placeholder="确认新密码"
                autocomplete="rel_new_password"
                [formControl]="rel_new_password"
              >
            </div>
          </div>
          <hr>
          <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
              <button
                type="submit" 
                class="btn btn-default  btn-with-icon"
                [disabled]="!authForm.valid || fetching[Loading.Auth]"
              >
                <i class="ion-md-done-all"></i>
                <span>保存修改</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </sa-card>
    <sa-card title="数据库操作" baCardClass="with-scroll">
      <div class="row">
        <div class="col-sm-12">
          <button
            class="btn btn-default btn-with-icon"
            [disabled]="fetching[Loading.DatabaseBackup]"
            (click)="updateDatabaseBackup()"
          >
            <i class="ion-md-cloud-upload"></i>
            <span>立即更新数据库备份 {{ fetching[Loading.DatabaseBackup] ? '...' : '' }}</span>
          </button>
        </div>
      </div>
    </sa-card>
    <sa-card title="更新数据" baCardClass="with-scroll">
      <div class="row">
        <div class="col-sm-12">
          <button
            class="btn btn-default btn-with-icon"
            [disabled]="fetching[Loading.GithubCache]"
            (click)="updateGithubCache()"
          >
            <i class="ion-md-refresh"></i>
            <span>更新 Github 缓存{{ fetching[Loading.GithubCache] ? '...' : '' }}</span>
          </button>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12">
          <button
            class="btn btn-default btn-with-icon"
            [disabled]="fetching[Loading.MusicCache]"
            (click)="updateMusicCache()"
          >
            <i class="ion-md-refresh"></i>
            <span>更新音乐缓存{{ fetching[Loading.MusicCache] ? '...' : '' }}</span>
          </button>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12">
          <button
            class="btn btn-default btn-with-icon"
            [disabled]="fetching[Loading.BilibiliCache]"
            (click)="updateBilibiliCache()"
          >
            <i class="ion-md-refresh"></i>
            <span>更新 Bilibili 缓存{{ fetching[Loading.BilibiliCache] ? '...' : '' }}</span>
          </button>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-sm-12">
          <button
            class="btn btn-default btn-with-icon"
            [disabled]="fetching[Loading.SitemapCache]"
            (click)="updateSitemapCache()"
          >
            <i class="ion-md-refresh"></i>
            <span>更新网站地图缓存{{ fetching[Loading.SitemapCache] ? '...' : '' }}</span>
          </button>
        </div>
      </div>
    </sa-card>
  </div>
</div>
